<template>
	<view class="orderview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="true" transparent="show" :color="navbarConfig.color"
			 title="订单详情"></hx-navbar>
		</view>

		<!-- 抢单记录 -->
		<view class="order-info">
			<view class="order-info-goto">
				<view class="order-info-goto-1"><text class="zhuang">起</text></view>
				<text class="order-info-goto-2">{{orderInfo.startPointName}}</text>
			</view>
			<view class="order-info-goto">
				<view class="order-info-goto-1"><text class="xie">终</text></view>
				<text class="order-info-goto-2">{{orderInfo.endPointName}}</text>
			</view>

			<u-line color="#101010" margin="20rpx -30rpx" length="690upx"></u-line>

			<view class="order-info-detail">
				<view class="order-info-detail-1">司机：</view>
				<view class="order-info-detail-2">{{orderInfo.carName}}</view>
			</view>

			<view class="order-info-detail">
				<view class="order-info-detail-1">联系方式：</view>
				<view class="order-info-detail-2">{{Phone}}</view>
			</view>
		</view>

		<view class="trace-box left">
			<view class="trace-item qi after">
				<text>司机位置</text>
				<u-icon class="icon" name="car-fill" color="#2979ff" size="28" v-if="orderInfo.status == 3"></u-icon>
				<text class="tip">司机位置</text>
			</view>
			<view class="trace-item zhan after">
				<text>{{orderInfo.startPointName}}</text>
				<u-icon class="icon" name="car-fill" color="#2979ff" size="28" v-if="orderInfo.status == 4"></u-icon>
				<text class="tip">取货站</text>
			</view>
			<view class="trace-item after" v-if="orderInfo.status == 4 || orderInfo.status == 5">
				<text class="tit">取货单:</text>
				<view class="img" v-if="orderInfo.startPointImages">
					<block v-for="(item, index) in orderInfo.startPointImages.split(',')" key="index">
						<image :src="item" mode="widthFix" @click="previewImage(index)"></image>
					</block>
				</view>
			</view>
			<view class="trace-item zhong">
				<text>{{orderInfo.endPointName}}</text>
				<u-icon class="icon" name="car-fill" color="#2979ff" size="28" v-if="orderInfo.status == 5"></u-icon>
				<text class="tip">终点</text>
			</view>
			<view class="trace-item" v-if="orderInfo.status == 5">
				<text class="tit">到货单:</text>
				<view class="img" v-if="orderInfo.endPointImages">
					<block v-for="(item, index) in orderInfo.endPointImages.split(',')" key="index">
						<image :src="item" mode="widthFix" @click="previewImage(index)"></image>
					</block>
				</view>
			</view>
		</view>

		<view class="order-info">
			<view class="order-info-detail">
				<view class="order-info-detail-1">订单生成时间：</view>
				<view class="order-info-detail-2">{{$util.sliceTime(orderInfo.createTime)}}</view>
			</view>

			<!-- <view class="order-info-detail">
				<view class="order-info-detail-1">付款方式：</view>
				<view class="order-info-detail-2">{{orderInfo.payType}}</view>
			</view> -->

			<!-- <view class="order-info-detail">
				<view class="order-info-detail-1">付款金额：</view>
				<view class="order-info-detail-2">¥{{orderInfo.cashDeposit}}</view>
			</view> -->

			<view class="order-info-detail">
				<view class="order-info-detail-1">司机押金：</view>
				<view class="order-info-detail-2">¥{{orderInfo.cashDeposit}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				orderInfo: '',
				Phone: ''
			}
		},
		onLoad(option) {
			this.id = option.id
			this.loadData()
		},
		components: {},
		methods: {
			loadData() {
				this.$api.request('POST', '/api/order/selectOrderInfoById', {
					id: this.id
				}).then(res => {
					this.orderInfo = res.data
				})
				this.$api.request('POST', '/api/user/selectUserTerracePhone', {}, false).then(res => {
					this.Phone = res.data
				})
			},
			previewImage(idx, images) {
				uni.previewImage({
					current: idx,
					urls: images
				})
			},
		}
	}
</script>

<style lang="less">

</style>
